<template>
    <div>
        <div class="deatil_box_middle" v-for="item in req" :key="item.id">
            <div class="fresh">
                <div class="price_box">
                    <span class="name">当前价</span><span class="price_num">￥{{item.currentprice}}</span>
                    <span class="fresh_btn btn_refresh">刷新价格</span>
                    <a target="_blank"
                        href="https://user.kongfz.com/User/Inform/addInform?informItemType=2&amp;toId=1078750&amp;toName=孔网古旧书店&amp;itemId=62994919&amp;itemName=Z：民国新文学精品 良友文库 阿英著作《夜航集》1935年初版本 软精装一册 开本尺寸15*10.5厘米 （此书 著者1933年至1935年间为各报刊所写的部分文章汇编。分4辑：小品文谈14篇；文艺随笔20篇；杂文杂考20篇；杂考5题。有介绍周作人、俞平伯、郭沫若、郁达夫、徐志摩等文学家的短文）"
                        class="report_btn">举报</a>
                </div>
                <div class="first_name deatil_info">
                    <span class="deatil_info_title">领先者</span>
                    <span class="deatil_info_con" style="width: 400px;">{{item.leader}}</span>
                </div>
                <div class="deatil_info start_price">
                    <span class="deatil_info_title">起拍价</span>
                    <span class="deatil_info_con" style="width: 91px;">￥{{item.startprice}}</span>
                </div>
                <div class="deatil_info start_add">
                    <span class="deatil_info_title" style="margin-right: 8px;">最小加价幅度</span>
                    <span class="deatil_info_con">￥{{item.quotaprice}}</span>
                </div>

                <div id="delivery">
                    <p class="address">
                        <span class="deatil_info_title">配送至</span>
                        <span class="operate-txt gray check">
                            <!-- <label>北京市东城区</label> -->
                            <label>
                                <CitySelect></CitySelect>
                            </label>
                        </span>
                    </p>
                    <p style="float:left">
                        <span class="deatil_info_title" style="margin-right: 8px;margin-bottom: 22px;">运费</span>
                        <span class="operate-txt gray">快递&nbsp;￥ {{item.deliveryfee}}</span>
                    </p>
                </div>


                <div class="deatil_btn_box">
                    <div id="put_price">
                        <span>我要出价</span>
                    </div>
                    <div class="like">
                        <img src="../assets/colect.webp" alt="" style="width:32px">
                        <div style="display:inline;" @click="collectBtn">收藏</div>
                    </div>
                    <div class="tip" style="position: relative;">
                        <span><img src="../assets/tips.webp" alt=""></span>
                        参拍提醒
                    </div>
                </div>
                <div class="border-box"></div>
            </div>

            <div class="time">
                <div class="deatil_title">
                    <span class="info_element_title">剩余时间</span>
                    <span class="gray">
                        <TimerL></TimerL>
                    </span>
                </div>
                <div class="deatil_title">
                    <span class="info_element_title">开始时间</span>
                    <span class="gray">2022-09-21 21:02:59</span>
                </div>
                <div class="deatil_title">
                    <span class="info_element_title">结束时间</span>
                    <span class="gray">2022-09-21 21:02:59</span>
                </div>
                <div class="deatil_title diff">
                    <div class="element" style="width:147px">
                        <span class="info_element_title">出价次数</span>
                        <span class="gray">59</span>次

                    </div>
                    <div class="element" style="width:147px">
                        <span class="info_element_title">浏览次数</span>
                        <span class="gray red">{{count}}100</span>次
                    </div>
                </div>
            </div>
            <div class="border-box"></div>

            <div style="float: left">
                <i class="icon pc-icon icon-bao-16px" style="position: relative;top: 1px;margin-right: 6px;">
                </i>
                <span style="color:#888; font-size: 14px;">担保交易 安全无忧</span>
            </div>
        </div>
        <!-- <div>1233444</div> -->
    </div>
</template>

<script lang="ts">
// import { getarticle } from '@/utils/api';
import { collects } from '@/utils/api';
import { defineComponent } from 'vue';
import CitySelect from './CitySelect.vue';
import TimerL from './TimerL.vue'

export default defineComponent({
   props:['aid','req'],
    components: { CitySelect, TimerL },

    data() {
        return {
            result: "",
            count:0
        };
    },
    methods: {
    collectBtn() {
 
      let id = this.$route.params.id as unknown as number;
      collects(id).then((res) => {
        console.log(res);

      }).catch(err => {
        console.log(err);

      })
    }
  },
})
</script>

<style lang="scss" scoped>
.deatil_box_middle {

    width: 496px;
    padding-left: 40px;
    height: 50px;

    .price_box {
        width: 100%;
        height: 28px;
        line-height: 20px;
        margin-bottom: 8px;

        .name {
            font-size: 14px;
            color: #888;
            margin-right: 20px;
        }

        .price_num {
            font-size: 24px;
            color: #8c222c;
            font-weight: 600;
        }

        .fresh_btn {
            font-size: 12px;
            color: #993d43;
            margin-left: 8px;
            cursor: pointer;
        }

        .report_btn {
            float: right;
            font-size: 12px;
            color: #c7c7c7;
            height: 14px;
            cursor: pointer;
        }
    }

    .first_name {
        height: 25px;
    }

    .start_price {
        height: 25px;
    }

    .start_add {
        height: 25px;
    }

    #delivery {
        height: 54px;

        .check {
            display: inline-block;
            color: #888;
            line-height: 32px;
            height: 32px;
            border: 1px solid #ccc;
        }

        .address {
            line-height: 34px;
        }

    }

    .deatil_info {
        margin-bottom: 12px;
        line-height: 25px;
    }

    .deatil_info_title {
        float: left;
        font-size: 14px;
        color: #888;
        margin-right: 20px;
    }

    .deatil_info_con {
        width: 152px;
        float: left;
        font-size: 14px;
        color: #404040;
    }

    .address {
        float: left;
        min-width: 280px;
        margin-right: 10px;
    }

    .deatil_btn_box {
        margin-bottom: 30px;
        height: 64px;

        #put_price {
            float: left;
            width: 164px;
            height: 52px;
            line-height: 52px;
            background: #993d43;
            border-radius: 4px;
            font-size: 20px;
            color: #fff;
            text-align: center;
            cursor: pointer;
            margin-right: 12px;
        }

        .like {
            float: left;
            width: 98px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #c7c7c7;
            border-radius: 4px;
            text-align: center;
            font-size: 20px;
            color: #404040;
            cursor: pointer;
            margin-right: 20px;

            img {
                width: 32px;
                vertical-align: middle;
                opacity: 0.5;
                margin-right: 5px;
            }
        }

        .tip {
            float: right;
            width: 76px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            color: #404040;
            cursor: pointer;
        }

    }
}

.border-box {
    width: 497px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #e9e9e9;
}

.deatil_title {
    font-size: 14px;
    color: #888;
    margin-right: 20px;
    margin-bottom: 24px;

}

.diff {
    display: flex;
}

.info_element_title {
    margin-right: 20px;
}

.gray {
    color: #404040;
}

.red {
    color: #993d43;
}

.tip img {
    width: 30px;
    position: absolute;
    top: 8px;
    left: -36px;
    opacity: 0.5;
}
</style>